<template>
  <div class="container-fluid standard-bg">
    <div class="col-lg-1"></div>

    <div class="main-content col-lg-10">
      <!-- CORE -->
      <div class="row">
        <!-- SIDEBAR -->
        <!-- col-lg-2 col-md-4 hidden-sm hidden-xs -->
        <div id="new-date-list" class="col-lg-12 col-md-12 col-sm-12 top-sidebar">
          <aside class="dark-bg">
            <article>
              <h2 class="icon"><i class="fa fa-clock-o" aria-hidden="true"></i>新番时间表</h2>
              <ul id="date-box">
                <li v-for="item in dateList" :key="item.id" :class="{'active': item.isActive}" @click="handle(item.id)">
                  <span class="fa" :class="item.class">{{ item.date }}</span>
                </li>
              </ul>

              <div class="sidebar-box">
                <ul class="sidebar-links" :class="{'now': selected === 3}">
                  <transition-group name="kerwin">
                    <li v-for="item in animeList" :key="item.id" class="fa col-lg-3 col-md-4 col-xs-6"
                        :class="{'fa-circle': item.refreshed === 1, 'fa-circle-o': item.refreshed !== 1}">
                      <span class="time">{{ item.refreshTime }}</span>
                      <a :href="item.href">
                        <article class="sidebar-icon col-sm-5" ref="icon">
                          <div class="post post-medium">
                            <div class="thumbr">
                              <span class="post-thumb span-a">
                                <span class="play-btn-border" title="Play"><i
                                  class="fa fa-play-circle headline-round"
                                  aria-hidden="true"></i></span>
                                <img class="img-responsive" :src="item.cover == null? defaultImg:item.cover" alt="#">
                              </span>
                            </div>
                            <div class="clearfix"></div>
                          </div>
                        </article>
                        <div class="col-sm-7 sidebar-title">
                          <div><i class="sidebar-title-tag" v-if="item.collected === 1">已追番</i>{{ item.name }}</div>
                          <div class="sidebar-title-index">第{{ item.no }}话</div>
                        </div>
                        <div class="clearfix"></div>
                      </a>
                    </li>
                  </transition-group>
                </ul>
              </div>
              <div class="clearfix"></div>
            </article>
          </aside>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {dateFormat} from '../../js/my-utils'
import {getAnimeRefresh} from './timeline-js'
export default {
  name: 'Schedule',
  data () {
    return {
      defaultImg: require('../../assets/img/thumbs/thumb-s2.jpg'),
      selected: 3,
      dateList: [],
      animeList: [],
      animeLists: []
    }
  },
  mounted () {
    // 日期列表
    for (let i = 0; i < 8; i++) {
      let item = {id: i, class: {}, date: this.getDate(i - 3), isActive: false}
      if (i < 3) {
        item.class = {'fa-calendar-times-o': true}
      } else if (i === 3) {
        item.class = {'fa-calendar-check-o': true}
        item.isActive = true
      } else {
        item.class = {'fa-calendar-o': true}
      }
      this.dateList.push(item)
    }
    for (let i = 0; i < 8; i++) {
      let items = []
      for (let j = 0; j < 5; j++) {
        let item = {id: i * 8 + j, refreshed: 1, refreshTime: '18:00', href: '#', cover: null, name: 'NULL', collected: 0, no: 0}
        if ((i === 3 && j > 1) || i > 3) {
          item.refreshed = 0
        }
        items.push(item)
      }
      this.animeLists.push(items)
    }
    this.animeList = this.animeLists[3]
    // 获取新番时间表
    getAnimeRefresh(this)
    this.$nextTick(function () {
      // div高度同步
      let height = this.$('article.sidebar-icon:eq(0)').css('height')
      this.$('div.sidebar-title').css('height', height)
    })
  },
  methods: {
    handle: function (val) {
      this.dateList[this.selected].isActive = false
      this.dateList[val].isActive = true
      this.animeList = this.animeLists[val]
      this.selected = val
      this.$nextTick(function () {
        // div高度同步
        let height = this.$('article.sidebar-icon:eq(0)').css('height')
        this.$('div.sidebar-title').css('height', height)
      })
    },
    getDate: function (val) {
      const day = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const now = new Date()
      const date = new Date(now.getTime() + 24 * 60 * 60 * 1000 * val)
      return day[date.getDay()] + '(' + dateFormat('mm-dd', date) + ')'
    }
  }
}
</script>

<style scoped>
  .kerwin-enter-active {
    animation: aaa 1s;
  }
  .kerwin-leave-active {
  }
  @keyframes aaa {
    0% {
      opacity: 0;
      transform: translateX(40px);
    }
    100% {
      opacity: 1;
    }
  }
</style>
